<template>
  <div class="nearby">
    <h2 class="nearby-title">附近店铺</h2>
    <router-link :to="`/shop/${item._id}`"
                 v-for="(item,index) in nearbyList"
                 :key="index"
    >
      <ShopInfo
        :item="item"
      />
    </router-link>
  </div>
</template>

<script>
import { ref } from 'vue'
import * as request from '@/utils/request'
import ShopInfo from '@/components/ShopInfo'

const useNearbyListEffect = () => {
  const nearbyList = ref([])
  const getNearbyList = async () => {
    const result = await request.get('/api/shop/hot-list')
    console.log(result)
    if (result?.errno === 0 && result?.data?.length) {
      nearbyList.value = result.data
    }
  }
  return {
    nearbyList,
    getNearbyList
  }
}
export default {
  name: 'NearBy',
  components: { ShopInfo },
  setup () {
    const {
      nearbyList,
      getNearbyList
    } = useNearbyListEffect()
    getNearbyList()
    return {
      getNearbyList,
      nearbyList
    }
  }
}
</script>

<style lang="scss" scoped>
@import "../../style/variables";

.nearby {
  margin-top: .16rem;
  margin-bottom: .3rem;

  .a {
    text-decoration: none;
  }

  .nearby-title {
    font-size: 18px;
    color: $content-fontcolor;
  }

}

</style>
